<template>
  <div class="data-wrapper">
    <div class="content">
      <div class="top">
        <ul>
          <li @click="cashClick">
            <h3>{{ data.cash_withdrawal }}</h3>
            <p>提现待审批</p>
          </li>
          <li @click="salesmanClick">
            <h3>{{ data.salesman_replenish }}</h3>
            <p>业务员进货待审批</p>
          </li>
          <li @click="salesmanBackClick">
            <h3>{{ data.salesman_recede }}</h3>
            <p>业务员退货待审批</p>
          </li>
        </ul>
      </div>
      <div class="middle">
        <div class="middle-top">
          <div class="left">
            <div class="income">
              <div class="title">营业收入：</div>
              <div class="content">
                <ul>
                  <li>
                    <h3>{{ data.sales_monthpay }}</h3>
                    <p>本月销售额（元）</p>
                  </li>
                  <li>
                    <h3>{{ data.sales_pay }}</h3>
                    <p>本月销售额（元）</p>
                  </li>
                </ul>
              </div>
            </div>
            <div class="sale">
              <div class="title">销售量：</div>
              <div class="content">
                <ul>
                  <li>
                    <h3>{{ data.sales_monthpay }}</h3>
                    <p>本笔销售笔数（笔）</p>
                  </li>
                  <li>
                    <h3>{{ data.sales_count }}</h3>
                    <p>总销售笔数（笔）</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="right-top">
              <h3>销售额趋势图</h3>
              <ul>
                <li
                  v-for="(item, index) of date"
                  :key="index"
                  :class="{'active': isActive === index }"
                  @click="dataClick(index)"
                >{{ item }}</li>
              </ul>
            </div>
            <div class="right-bottom">
              <Echarts :option="option" />
            </div>
          </div>
        </div>
        <div class="middle-bottom">
          <ul>
            <li>
              <h3>{{ data.shop }}</h3>
              <p>店铺列表</p>
            </li>
            <li>
              <h3>{{ data.salesman }}</h3>
              <p>业务员列表</p>
            </li>
            <li>
              <h3>{{ data.commodity_count }}</h3>
              <p>商品列表</p>
            </li>
            <li>
              <h3>{{ data.commodity_inventory }}</h3>
              <p>库存</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom-left">
          <div class="title">商品销售排行（前5）</div>
          <div class="content">
            <el-table :data="data.commodity_ranking" style="width: 100%; border: 1px solid #eee" max-height="245">
              <el-table-column prop="name" label="商品名称" width="300" />
              <el-table-column prop="number" label="销售(件)" width />
              <el-table-column prop="sales" label="收入(元)" width />
              <el-table-column prop="percent" label="收入占比" width>
                <template slot-scope="scope">
                  <div>
                    {{ ((scope.row.sales / goodsSales)*100).toFixed(2) + '%' }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- <div class="cover" /> -->
          </div>
        </div>
        <div class="bottom-right">
          <div class="title">店铺销售排行（前5）</div>
          <div class="content">
            <el-table :data="data.shop_ranking" style="width: 100%; border: 1px solid #eee" max-height="245">
              <el-table-column prop="nickname" label="店铺名称" width="300" />
              <el-table-column prop="number" label="销售(件)" width />
              <el-table-column prop="sales" label="收入(元)" width />
              <el-table-column prop="percent" label="收入占比" width>
                <template slot-scope="scope">
                  <div>
                    {{ ((scope.row.sales / shopSales)*100).toFixed(2) + '%' }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- <div class="cover" /> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Echarts from './echarts'
import { getDataAnalysis } from '@/api/data'
const ERR_OK = 200
export default {
  components: {
    Echarts
  },
  data() {
    return {
      tableData: [
        {
          name: '商品名称商品名称商品名称',
          sale: '100',
          income: '0.00',
          percent: '0.00%'
        },
        {
          name: '商品名称商品名称商品名称',
          sale: '100',
          income: '0.00',
          percent: '0.00%'
        },
        {
          name: '商品名称商品名称商品名称',
          sale: '100',
          income: '0.00',
          percent: '0.00%'
        },
        {
          name: '商品名称商品名称商品名称',
          sale: '100',
          income: '0.00',
          percent: '0.00%'
        },
        {
          name: '商品名称商品名称商品名称',
          sale: '100',
          income: '0.00',
          percent: '0.00%'
        },
        {
          name: '商品名称商品名称商品名称',
          sale: '100',
          income: '0.00',
          percent: '0.00%'
        },
        {
          name: '商品名称商品名称商品名称',
          sale: '100',
          income: '0.00',
          percent: '0.00%'
        }
      ],
      isActive: 0,
      date: ['日', '月', '年'],
      option: {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: []
          }
        ]
      },
      myDate: { date: [], data: [] },
      myMonths: { month: [], data: [] },
      myYear: { year: [], data: [] },
      data: {}
    }
  },
  computed: {
    goodsSales() {
      let num = 0
      this.data.commodity_ranking.forEach((item, index) => {
        num += item.sales
      })
      return num
    },
    shopSales() {
      let num = 0
      this.data.shop_ranking.forEach((item, index) => {
        num += item.sales
      })
      return num
    }
  },
  created() {
    this._getDataAnalysis()
      .then(() => {
        this.option.xAxis[0].data = this.myDate.date
        this.option.series[0].data = this.myDate.data
      })
      .catch(err => {
        console.log(err)
      })
  },
  methods: {
    salesmanBackClick() {
      this.$router.push({ name: 'stock', params: { index: 3 }})
    },
    salesmanClick() {
      this.$router.push({ name: 'stock', params: { index: 2 }})
    },
    cashClick() {
      this.$router.push('/b/cash/detail')
    },
    dataClick(index) {
      this.isActive = index
      switch (this.isActive) {
        case 0:
          this.option.xAxis[0].data = this.myDate.date
          this.option.series[0].data = this.myDate.data
          break
        case 1:
          this.option.xAxis[0].data = this.myMonths.date
          this.option.series[0].data = this.myMonths.data
          break
        case 2:
          this.option.xAxis[0].data = this.myYear.date
          this.option.series[0].data = this.myYear.data
          break
      }
    },
    _getDataAnalysis() {
      return getDataAnalysis()
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.data = res.data
            this.myDate.date = res.data.chart.month.date
            this.myDate.data = res.data.chart.month.data
            this.myMonths.date = res.data.chart.year.date
            this.myMonths.data = res.data.chart.year.data
            this.myYear.date = res.data.chart.years.date
            this.myYear.data = res.data.chart.years.date
            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
          return Promise.reject()
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.data-wrapper {
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  padding: 15px 15px;
  box-sizing: border-box;
  padding-bottom: 50px;
  h3,
  p,
  ul,
  li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .content{
    min-height: 105vh;
  }
  .top {
    width: 100%;
    height: 90px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(245, 108, 108, 1);
    font-size: 14px;
    text-align: center;
    font-family: Roboto;
    padding: 0 100px;
    ul {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      justify-content: space-around;
      li {
        list-style: none;
        cursor: pointer;
        h3 {
          line-height: 52px;
          color: rgba(245, 108, 108, 1);
          font-size: 36px;
          text-align: center;
          font-family: Roboto;
          margin: 0;
        }
        p {
          line-height: 20px;
          color: rgba(102, 102, 102, 1);
          font-size: 14px;
          text-align: center;
          font-family: Roboto;
          margin: 0;
        }
      }
    }
  }
  .middle {
    padding-top: 14px;
    .middle-top {
      display: flex;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        flex-basis: 30%;
        .income,
        .sale {
          flex-basis: 50%;
          height: 288px;
          border-radius: 4px;
          background-color: rgba(245, 108, 108, 1);
          text-align: center;
          font-family: Roboto;
          padding: 17px 25px;
          box-sizing: border-box;
          margin-right: 15px;
          .title {
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            text-align: left;
            font-family: SourceHanSansSC-regular;
            font-weight: bold;
            white-space: nowrap;
          }
          .content {
            width: 100%;
            margin-top: 25px;
            ul {
              li {
                list-style: none;
                margin-bottom: 30px;
                h3 {
                  color: rgba(255, 255, 255, 1);
                  font-size: 32px;
                  text-align: left;
                  font-family: SourceHanSansSC-regular;
                }
                p {
                  color: rgba(255, 255, 255, 1);
                  font-size: 14px;
                  text-align: left;
                  font-family: SourceHanSansSC-regular;
                  margin-top: 10px;
                }
              }
            }
          }
        }
        .sale {
          background: #fff;
          .title {
            color: #404040;
          }
          .content {
            ul {
              li {
                color: #404040;
                h3 {
                  color: #404040;
                  white-space: nowrap;
                }
                p {
                  color: #404040;
                  white-space: nowrap;
                }
              }
            }
          }
        }
      }
      .right {
        flex-basis: 70%;
        height: 288px;
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        font-family: Roboto;
        padding: 15px 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .right-top {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 2px solid #eee;
          padding-bottom: 5px;
          h3 {
            line-height: 23px;
            color: rgba(51, 51, 51, 1);
            font-size: 16px;
            text-align: left;
            font-family: Roboto;
          }
          ul {
            display: flex;
            li {
              width: 40px;
              height: 22px;
              line-height: 20px;
              border-radius: 4px;
              color: #000;
              background: #ebeef5;
              margin-right: 12px;
              font-size: 13px;
              text-align: center;
              font-family: Roboto;
              border: 1px solid rgba(255, 0, 0, 0);
              box-sizing: border-box;
              cursor: pointer;
              &.active {
                background-color: rgba(64, 158, 255, 1);
                color: #fff;
              }
            }
          }
        }
        .right-bottom {
          flex: 1;
        }
      }
    }
    .middle-bottom {
      width: 100%;
      margin-top: 16px;
      ul {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        li {
          flex-basis: 23%;
          height: 150px;
          background: #fff;
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          h3 {
            color: rgba(102, 102, 102, 1);
            font-size: 36px;
            text-align: left;
            font-family: SourceHanSansSC-regular;
          }
          p {
            color: rgba(102, 102, 102, 1);
            font-size: 14px;
            text-align: left;
            font-family: SourceHanSansSC-regular;
            margin: 10px;
          }
        }
      }
    }
  }
  .bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 300px;
    margin-top: 15px;
    > div {
      flex-basis: 47.5%;
      background: #fff;
      height: 100%;
      padding: 15px;
      box-sizing: border-box;
      border-radius: 4px;
      position: relative;
    }
    .bottom-left,
    .bottom-right {
      .title {
        line-height: 23px;
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        text-align: left;
        font-family: Roboto;
        font-weight: bold;
      }
      .content {
        .cover {
          position: absolute;
          width: 20px;
          height: 300px;
          right: 13px;
          top: 0;
          background: #fff;
        }
      }
      .bottom-right {
        .content {
          .cover {
            position: absolute;
            width: 20px;
            height: 300px;
            right: 13px;
            top: 0;
            background: #fff;
          }
        }
      }
    }
    .el-table /deep/ .has-gutter {
      line-height: 20px;
      background-color: #fafafa !important;
      color: rgba(16, 16, 16, 1);
      font-size: 14px;
      text-align: center;
      font-family: Roboto;
      border: 1px solid rgba(235, 238, 245, 1);
      font-weight: bold;
      height: 30px !important;
      th {
        background-color: #fafafa !important;
      }
    }
  }
}
</style>
